<template>
	<view class="uiwu">
		<view class="uiwu-header">
			<view class="title" v-if="items.state == 1">等待商家发货</view>
			<view class="title" v-if="items.state == 2">等待确认收货</view>
			<view class="title" v-if="items.state == 3">订单已完成</view>
			<view class="tips">感谢您的信任，期待再次为您服务</view>
		</view>
		<view class="uiwu-location uiwu-flex-align">
			<image src="/static/location.png" mode="widthFix"></image>
			<view class="in uiwu-flex-column">
				<text>{{items.grab_prize_order?.real_name}} {{items.grab_prize_order?.user_phone}}</text>
				<text>{{items.grab_prize_order?.user_address}}</text>
			</view>
		</view>
		<view v-if="items.logistics?.length" class="uiwu-logistics uiwu-flex-align" @tap="uiwu.openWindow(`/pages/AfterSales/logistics?id=${items.id}&type=1`)">
			<image src="/static/chezi.png" mode="widthFix"></image>
			<view class="in">
				<view class="title">
					<!-- 运输中 -->
					<text>{{items.logistics[0]?.AcceptTime}}</text>
				</view>
				<view class="tips uiwu-hidden1">{{items.logistics[0]?.AcceptStation}}</view>
			</view>
			<uiwu-icon type="arrowright" size="18" color="#999"></uiwu-icon>
		</view>
		<view class="uiwu-goods uiwu-flex-space">
			<image :src="items.product_image" mode="aspectFill"></image>
			<view class="name">{{items.product_name}}</view>
			<view class="num">x1</view>
		</view>
		<view class="uiwu-list" v-if="items.grab_prize_order">
			<view class="item uiwu-flex-space">
				<text>订单号</text>
				<text>{{items.grab_prize_order.order_sn}}</text>
			</view>
			<view class="item uiwu-flex-space">
				<text>下单时间</text>
				<text>{{uiwu.formatTimestamp(items.grab_prize_order.add_time * 1000)}}</text>
			</view>
			<view class="item uiwu-flex-space" v-if="items.grab_prize_order.delivery_time">
				<text>发货时间</text>
				<text>{{uiwu.formatTimestamp(items.grab_prize_order.delivery_time * 1000)}}</text>
			</view>
			<view class="item uiwu-flex-space">
				<text>订单运费</text>
				<text>{{items.grab_prize_order.is_free_postage == 1 ? '免运费' : `￥${items.grab_prize_order.pay_postage}`}}</text>
			</view>
		</view>
		<uiwu-footer v-if="items.state == 2 || items.state == 3 ">
			<view class="uiwu-footer uiwu-flex-align">
				<text class="uiwu-flex-center" v-if="items.state == 2" @tap="showModel = true">确认收货</text>
				<text class="uiwu-flex-center" v-if="items.state == 3 && items.refund_status == 0" @tap.stop="openAppl">申请售后</text>
			</view>
		</uiwu-footer>
		<uiwu-popup-model v-model="showModel" @confirm="confirm">
			<text>是否确认该订单已收货</text>
		</uiwu-popup-model>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { uiwu } from '@/config/config';
	import { ref } from "vue";
	import { prizeinfo , prizeReceipt } from '@/api/prize';
	const showModel = ref<boolean>(false)
	const items = ref({})
	const openAppl = () : void =>{
		const goods = {
			name:items.value.product_name,
			img:items.value.product_image,
			id:items.value.id,
			type:'2'
		}
		uiwu.openWindow(`/pages/AfterSales/AfterSales?goods=${JSON.stringify(goods)}`)
	}
	const confirm = async () : Promise<any> => {
		const result = await prizeReceipt({
			order_id:items.value.order_id
		})
		if(!result) return 
		showModel.value = false
		uiwu.toast('收货成功')
		getintegralOrderDetail(items.value.id)
	}
	const getintegralOrderDetail = async (id:string|number) : Promise<any> => {
		const { data } = await prizeinfo(id);
		items.value = data
	}
	onLoad(({id})=>{
		getintegralOrderDetail(id)
	})
</script>

<style lang="scss">
	page{
		background-color: #e6e6e6;
	}
	.uiwu{
		background: url('../../static/orderbg.png') no-repeat 0 0;
		background-size: 100% 258rpx;
	}
	.uiwu-header{
		width: 100%;
		height: 156rpx;
		padding: 40rpx 50rpx 0;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
		.tips{
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 6rpx;
		}
	}
	.uiwu-location{
		width: 702rpx;
		height: 146rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 0 18rpx;
		image{
			width: 40rpx;
			margin-right: 18rpx;
		}
		.in{
			text{
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				&:nth-child(1){
					font-size: 28rpx;
					font-weight: 500;
					color: #231815;
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.uiwu-logistics{
		width: 702rpx;
		height: 146rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 0 18rpx;
		image{
			width: 40rpx;
			margin-right: 18rpx;
		}
		.in{
			flex: 1;
			.title{
				font-size: 28rpx;
				font-weight: bold;
				color: #EF821E;
				text{
					margin-left: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #EF821E;
				}
			}
			.tips{
				margin-top: 10rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}
		}
	}
	.uiwu-goods{
		width: 702rpx;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 0 18rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 16rpx;
		}
		.name{
			font-size: 28rpx;
			font-weight: bold;
			color: #444444;
			flex: 1;
			padding: 0 24rpx;
		}
		.num{
			font-size: 28rpx;
			font-weight: bold;
			color: #444444;
		}
	}
	.uiwu-list{
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 16rpx 24rpx;
		.item{
			padding: 16rpx 0;
			text{
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				&:nth-child(2){
					font-size: 28rpx;
					font-weight: 400;
					color: #231815;
				}
			}
		}
	}
	.uiwu-footer{
		width: 100%;
		justify-content: flex-end;
		padding: 20rpx 24rpx 16rpx;
		background-color: #fff;
		text{
			width: 220rpx;
			height: 72rpx;
			background: #EF821E;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
